import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Dropdown,
  Menu,
  Checkbox,
  Steps,
  Modal,
  Form,
  Pagination,
  Popconfirm,
  Timeline,
  Tabs,
  Card,
  Tag
} from 'antd';
import MyIcon from '../components/common/MyIcon/MyIcon';
import CheckBox from 'CheckBox'; //自定义 多选框
import Immutable from 'immutable';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;//日历
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;




export default class Set extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ModalEdit: false,
    };
  }
  showModalEdit(ModalEdit) {
    this.setState({ModalEdit});
  }
  render() {
    let data_leixing = [
      {
        text: '选择项',
        state: true,
      }, {
        text: '输入框',
        state: '',
      }, {
        text: '文本框',
        state: '',
      }
    ];
    return (
      <div>
        <h3 className="title-h3">设置</h3>
        <Tabs defaultActiveKey="1">
          <TabPane tab="短信签名" key="1">
            <div className="set-message">
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">签名申请</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <Row gutter={16}>
                      <Col span={5}>
                        <div className="ant-form-item-control">
                          <Input size="large" placeholder="请输入签名" value="栗子孕育"/>
                        </div>
                      </Col>
                      <Col span={10}>
                        <div className="state-set">
                          <span className="state state-green">申请成功</span>
                          <span className="state state-red">申请失败</span>
                          <span className="state state-blue">申请中</span>
                        </div>
                      </Col>
                    </Row>
                    <div className="mt5">
                      <p className="tips-p">短信签名设置后，显示在发送出去的每一条短信开头，将会占用短信的字数，请根据您的公司名称设置。签名有修改时，自动送审，审核未通过时，默认使用上次成功的签名。</p>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">品牌信息</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <Row gutter={16}>
                      <Col span={5}>
                        <div className="ant-form-item-control">
                          <Input size="large" placeholder="请输入品牌信息" value="家政服务"/>
                        </div>
                      </Col>
                    </Row>
                    <div className="mt5">
                      <p className="tips-p">1、品牌信息是根据运营商要求，设置的审核条件之一，请保证填写的“品牌信息”能够在百度搜索后出现您的“签名”信息。</p>
                      <p className="tips-p">2、如果没有合适的信息，可填写“个人代理”，但此信息限制签名在3~8个中文。</p>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}></Col>
                  <Col span={5}>
                    <Button type="primary" size="large">重新申请</Button>
                  </Col>
                </Row>
              </div>
            </div>
          </TabPane>
          <TabPane tab="短信签名2" key="2">

          </TabPane>
        </Tabs>
      </div>
    )
  }
}
